<template>
  <view v-if="servList.length > 0">
    <view class="grid margin-bottom text-center col-2">
      <view v-for="(item,index) in servList" :key="index" class="margin-top-xs">
        <view :class="index%2 == 0 ? 'margin-right-xs' : 'margin-left-xs'" class="padding-sm  bg-white serv-card" @tap="_toDetail(item)">
          <view class="serv-imgage-block">
            <image :src="item.coverPhoto?item.coverPhoto:'/static/noPic.png'" class="serv-image c-radius"></image>
            <view class="cu-tag bg-gradual-orange round serv-tag">
              {{ item.keyword.split(';')[0] }}
            </view>
          </view>
          <view class="margin-top-sm text-left serv-title">
            <text>{{ item.servName }}</text>
            <view class="cu-tag round bg-orange sm margin-left-sm" v-if="item.sales">销量{{ item.sales }}</view>
          </view>
<!--          <view class="flex justify-between margin-top-xs">
            <view class="text-cut serv-desc text-gray">
              <text class="cuIcon-locationfill text-orange margin-right-xs"></text>
              {{ item.servDesc }}
            </view>
          </view>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mapping from "../../lib/java110/java110Mapping.js"

export default {
  props: ['servList'],
  data() {
    return {

    }
  },
  mounted() {
    console.log('组件加载')
  },
  methods: {
    _toDetail: function (e) {
      uni.setStorageSync(mapping.CACHE_CURRENT_SERV, e)
      this.vc.navigateTo({
        url: '/pages/homemaking/detail?servId=' + e.servId + "&shopId=" + e.shopId
      })
    },
  }
}
</script>

<style lang="scss">
.serv-card {
  border-radius: 20upx;
  .serv-imgage-block{
    position: relative;
    .serv-image {
      height: 300upx;
    }
    .serv-tag {
      position: absolute;
      left: 10upx;
      top: 10upx;
      height: 20px;
    }
  }

  .serv-title,.serv-desc {
    height: 40upx;
    line-height: 40upx;
  }
}


</style>
